<script setup>
import Header from './components/header.vue'
import Footer from './components/footer.vue'


</script>

<template>
	<Header />
	<div class="slice py-7">
		<div class="container">
			<div class="row row-grid align-items-center">
				<div class="col-12 col-md-5 col-lg-6 order-md-2 text-center">
					<figure class="w-100">
						<img alt="Image placeholder" src="@/assets/illustration-3.svg"
							class="img-fluid mw-md-120">
					</figure>
				</div>
				<div class="col-12 col-md-7 col-lg-6 order-md-1 pr-md-5">
					<!-- Heading -->
					<h1 class="display-4 text-center text-md-left mb-3">
						面向编程爱好者和专业人士的<strong class="text-primary">在线编程挑战平台</strong>
					</h1>
					<!-- Text -->
					<p class="lead text-center text-md-left text-muted">
						开始你的编程之旅！
					</p>
					<!-- Buttons -->
					<div class="text-center text-md-left mt-5">
						<a href="https://webpixels.io/themes/quick-free-bootstrap-theme"
							class="btn btn-primary btn-icon" target="_blank">
							<span class="btn-inner--text">开始挑战</span>
							<span class="btn-inner--icon"><i data-feather="chevron-right"></i></span>
						</a>
						<a href="https://webpixels.io/illustrations"
							class="btn btn-neutral btn-icon d-none d-lg-inline-block" target="_blank">学习课程</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="slice slice-lg pt-lg-6 pb-0 pb-lg-6 bg-section-secondary">
		<div class="container">
			<!-- Title -->
			<!-- Section title -->
			<div class="row mb-5 justify-content-center text-center">
				<div class="col-lg-6">
					<span class="badge badge-soft-success badge-pill badge-lg">
						Get started
					</span>
					<h2 class=" mt-4">Carefuly crafted components ready to use in your project</h2>
					<div class="mt-2">
						<p class="lead lh-180">Use Atomic Design to build components, sections and, then, pages.</p>
					</div>
				</div>
			</div>
			<!-- Card -->
			<div class="row mt-5">
				<div class="col-md-4">
					<div class="card">
						<div class="card-body pb-5">
							<div class="pt-4 pb-5">
								<img src="@/assets/illustration-5.svg" class="img-fluid img-center"
									style="height: 150px;" alt="Illustration" />
							</div>
							<h5 class="h4 lh-130 mb-3">Unleash you creativity</h5>
							<p class="text-muted mb-0">Quick Website UI Kit (FREE) contains components and pages that
								are easy to customize and change.</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card">
						<div class="card-body pb-5">
							<div class="pt-4 pb-5">
								<img src="@/assets/illustration-6.svg" class="img-fluid img-center"
									style="height: 150px;" alt="Illustration" />
							</div>
							<h5 class="h4 lh-130 mb-3">Get more results</h5>
							<p class="text-muted mb-0">Quick Website UI Kit (FREE) contains components and pages that
								are easy to customize and change.</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card">
						<div class="card-body pb-5">
							<div class="pt-4 pb-5">
								<img src="@/assets/illustration-7.svg" class="img-fluid img-center"
									style="height: 150px;" alt="Illustration" />
							</div>
							<h5 class="h4 lh-130 mb-3">Increase your audience</h5>
							<p class="text-muted mb-0">Quick Website UI Kit (FREE) contains components and pages that
								are easy to customize and change.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="slice slice-lg">
		<div class="container">
			<div class="py-6">
				<div class="row row-grid justify-content-between align-items-center">
					<div class="col-lg-5 order-lg-2">
						<h5 class="h3">Need a quick admin panel for your website?</h5>
						<p class="lead my-4">
							With Quick you get components and examples, including tons of variables that will help you
							customize this theme with ease.
						</p>
						<ul class="list-unstyled mb-0">
							<li class="py-2">
								<div class="d-flex align-items-center">
									<div>
										<div class="icon icon-shape bg-primary text-white icon-sm rounded-circle mr-3">
											<i class="fas fa-file-invoice"></i>
										</div>
									</div>
									<div>
										<span class="h6 mb-0">Perfect for modern startups</span>
									</div>
								</div>
							</li>
							<li class="py-2">
								<div class="d-flex align-items-center">
									<div>
										<div class="icon icon-shape bg-primary text-white icon-sm rounded-circle mr-3">
											<i class="fas fa-store-alt"></i>
										</div>
									</div>
									<div>
										<span class="h6 mb-0">Ready to be customized</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="col-lg-6 order-lg-1">
						<div class="card mb-0 mr-lg-5">
							<div class="card-body p-2">
								<img alt="Image placeholder" src="@/assets/screen-1-1000x800.jpg"
									class="img-fluid shadow rounded">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="py-6">
				<div class="row row-grid justify-content-between align-items-center">
					<div class="col-lg-5">
						<h5 class="h3">A modern project management dashboard</h5>
						<p class="lead my-4">
							With Quick you get components and examples, including tons of variables that will help you
							customize this theme with ease.
						</p>
						<ul class="list-unstyled mb-0">
							<li class="py-2">
								<div class="d-flex align-items-center">
									<div>
										<div class="icon icon-shape bg-primary text-white icon-sm rounded-circle mr-3">
											<i class="fas fa-file-invoice"></i>
										</div>
									</div>
									<div>
										<span class="h6 mb-0">Perfect for modern startups</span>
									</div>
								</div>
							</li>
							<li class="py-2">
								<div class="d-flex align-items-center">
									<div>
										<div class="icon icon-shape bg-primary text-white icon-sm rounded-circle mr-3">
											<i class="fas fa-store-alt"></i>
										</div>
									</div>
									<div>
										<span class="h6 mb-0">Ready to be customized</span>
									</div>
								</div>
							</li>
							<li class="py-2">
								<div class="d-flex align-items-center">
									<div>
										<div class="icon icon-shape bg-primary text-white icon-sm rounded-circle mr-3">
											<i class="fas fa-store-alt"></i>
										</div>
									</div>
									<div>
										<span class="h6 mb-0">Designed for every devices</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="col-lg-6">
						<div class="card mb-0 ml-lg-5">
							<div class="card-body p-2">
								<img alt="Image placeholder" src="@/assets/screen-2-1000x800.jpg"
									class="img-fluid shadow rounded">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="slice slice-lg bg-section-dark pt-5 pt-lg-8">
		<!-- SVG separator -->
		<div class="shape-container shape-line shape-position-top shape-orientation-inverse">
			<svg width="2560px" height="100px" xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px"
				viewBox="0 0 2560 100" style="enable-background:new 0 0 2560 100;" xml:space="preserve" class="">
				<polygon points="2560 0 2560 100 0 100"></polygon>
			</svg>
		</div>
		<!-- Container -->
		<div class="container position-relative zindex-100">
			<div class="col">
				<div class="row justify-content-center">
					<div class="col-md-10 text-center">
						<div class="mt-4 mb-6">
							<h2 class="h1 text-white">
								Are you ready to grow faster?
							</h2>
							<h4 class="text-white mt-3">Create your own experience</h4>
							<!-- Play button -->
							<a href="#" class="btn btn-primary btn-icon mt-4">Learn more</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="slice pt-0">
		<div class="container position-relative zindex-100">
			<div class="row">
				<div class="col-xl-4 col-sm-6 mt-n7">
					<div class="card">
						<div class="d-flex p-5">
							<div>
								<span class="badge badge-warning badge-pill">New</span>
							</div>
							<div class="pl-4">
								<h5 class="lh-130">Listen to the nature</h5>
								<p class="text-muted mb-0">
									Design made simple with a clean and smart HTML markup.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6 mt-sm-n7">
					<div class="card">
						<div class="d-flex p-5">
							<div>
								<span class="badge badge-success badge-pill">Tips</span>
							</div>
							<div class="pl-4">
								<h5 class="lh-130">Rules not to follow</h5>
								<p class="text-muted mb-0">
									Design made simple with a clean and smart HTML markup.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-md-12 col-sm-6 mt-xl-n7">
					<div class="card">
						<div class="d-flex p-5">
							<div>
								<span class="badge badge-danger badge-pill">Update</span>
							</div>
							<div class="pl-3">
								<h5 class="lh-130">Beware the water</h5>
								<p class="text-muted mb-0">
									Design made simple with a clean and smart HTML markup.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xl-4 col-sm-6">
					<div class="card">
						<div class="d-flex p-5">
							<div>
								<span class="badge badge-warning badge-pill">New</span>
							</div>
							<div class="pl-4">
								<h5 class="lh-130">Listen to the nature</h5>
								<p class="text-muted mb-0">
									Design made simple with a clean and smart HTML markup.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-sm-6">
					<div class="card">
						<div class="d-flex p-5">
							<div>
								<span class="badge badge-success badge-pill">Tips</span>
							</div>
							<div class="pl-4">
								<h5 class="lh-130">Rules not to follow</h5>
								<p class="text-muted mb-0">
									Design made simple with a clean and smart HTML markup.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-md-12 col-sm-6">
					<div class="card">
						<div class="d-flex p-5">
							<div>
								<span class="badge badge-danger badge-pill">Update</span>
							</div>
							<div class="pl-3">
								<h5 class="lh-130">Beware the water</h5>
								<p class="text-muted mb-0">
									Design made simple with a clean and smart HTML markup.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="slice slice-lg">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<span class="badge badge-primary badge-pill">Key features</span>
					<h5 class="lh-180 mt-4 mb-6">Quick is a premium HTML template that includes adaptable components and
						pages for various industries, plus new ones each month.</h5>
				</div>
			</div>
			<!-- Features -->
			<div class="row mx-lg-n4">
				<!-- Features - Col 1 -->
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div class="icon icon-shape rounded-circle bg-warning text-white mr-4">
									<i data-feather="check"></i>
								</div>
							</div>
							<div>
								<span class="h6">100% Responsive</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div class="icon icon-shape rounded-circle bg-primary text-white mr-4">
									<i data-feather="check"></i>
								</div>
							</div>
							<div>
								<span class="h6">Based on Bootstrap 4</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div class="icon icon-shape rounded-circle bg-danger text-white mr-4">
									<i data-feather="check"></i>
								</div>
							</div>
							<div>
								<span class="h6">Built with SASS</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div class="icon icon-shape rounded-circle bg-success text-white mr-4">
									<i data-feather="check"></i>
								</div>
							</div>
							<div>
								<span class="h6">300+ components</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div class="icon icon-shape rounded-circle bg-info text-white mr-4">
									<i data-feather="check"></i>
								</div>
							</div>
							<div>
								<span class="h6">23+ widgets</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div class="icon icon-shape rounded-circle bg-warning text-white mr-4">
									<i data-feather="check"></i>
								</div>
							</div>
							<div>
								<span class="h6">Bootstrap Flexbox Grid</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<!-- Features - Col 3 -->
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div>
									<div class="icon icon-shape rounded-circle bg-info text-white mr-4">
										<i data-feather="check"></i>
									</div>
								</div>
							</div>
							<div>
								<span class="h6">Animate CSS</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div>
									<div class="icon icon-shape rounded-circle bg-danger text-white mr-4">
										<i data-feather="check"></i>
									</div>
								</div>
							</div>
							<div>
								<span class="h6">Integrated plugins</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 px-lg-4">
					<div class="card shadow-none">
						<div class="p-3 d-flex">
							<div>
								<div>
									<div class="icon icon-shape rounded-circle bg-primary text-white mr-4">
										<i data-feather="check"></i>
									</div>
								</div>
							</div>
							<div>
								<span class="h6">Smart HTML markup</span>
								<p class="text-sm text-muted mb-0">
									Built to be customized.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="slice slice-lg bg-section-secondary">
		<div class="container text-center">
			<div class="row justify-content-center mb-6">
				<div class="col-lg-8">
					<!-- Title -->
					<h2 class="h1 strong-600">
						Complete features at your hand
					</h2>
					<!-- Text -->
					<p class="text-muted">
						Thousands of developers around the world have already made Quick the main tool for building
						websites.
					</p>
				</div>
			</div>
			<!-- Pricing -->
			<div class="row justify-content-center">
				<div class="col-lg-4 col-md">
					<div class="card card-pricing text-center px-3 hover-scale-110">
						<div class="card-header py-5 border-0 delimiter-bottom">
							<div class="h1 text-center mb-0">$<span class="price font-weight-bolder">49</span></div>
							<span class="h6 text-muted">Standard License</span>
						</div>
						<div class="card-body">
							<ul class="list-unstyled text-sm mb-4">
								<li class="py-2">1 end product</li>
								<li class="py-2">Use for personal or a client</li>
								<li class="py-2">Use in a free end product</li>
								<li class="py-2">6 months technical support</li>
							</ul>
							<a href="#"
								class="btn btn-sm btn-warning hover-translate-y-n3 hover-shadow-lg mb-3">Purchase
								now</a>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md">
					<div class="card card-pricing bg-dark text-center px-3 border-0 hover-scale-110">
						<div class="card-header py-5 border-0 delimiter-bottom">
							<div class="h1 text-white text-center mb-0">$<span
									class="price font-weight-bolder">590</span></div>
							<span class="h6 text-white">Extended License</span>
						</div>
						<div class="card-body">
							<ul class="list-unstyled text-white text-sm opacity-8 mb-4">
								<li class="py-2">1 end product</li>
								<li class="py-2">Use for personal or a client</li>
								<li class="py-2">Use in a free end product</li>
								<li class="py-2">Use in an end product that is <strong
										class="text-success text-underline--dashed">sold</strong></li>
								<li class="py-2">6 months technical support</li>
							</ul>
							<a href="#" class="btn btn-sm btn-white hover-translate-y-n3 hover-shadow-lg mb-3">Purchase
								now</a>
						</div>
					</div>
				</div>
			</div>
			<div class="mt-5 text-center">
				<p class="mb-2">
					Both pricings contains all 6 months free support. Need more?
				</p>
				<a href="#" class="text-primary text-underline--dashed">Contact us<i data-feather="arrow-right"
						class="ml-2"></i></a>
			</div>
		</div>
	</div>
	<Footer />
</template>

<style lang="scss" scoped>
@import './style/quick-website.css';
@keyframes hidePreloader {
	0% {
		width: 100%;
		height: 100%;
	}

	100% {
		width: 0;
		height: 0;
	}
}

body>div.preloader {
	position: fixed;
	background: white;
	width: 100%;
	height: 100%;
	z-index: 1071;
	opacity: 0;
	transition: opacity .5s ease;
	overflow: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

body:not(.loaded)>div.preloader {
	opacity: 1;
}

body:not(.loaded) {
	overflow: hidden;
}

body.loaded>div.preloader {
	animation: hidePreloader .5s linear .5s forwards;
}
</style>